<template>
    <div class="icons">
         <swiper :options="swiperOption"  ref="mySwiper">
             <swiper-slide>
                <div class="icon">
                    <i class="iconfont">&#xe623;</i>
                    <p>景点门票</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe61d;</i>
                    <p>滑雪季</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe606;</i>
                    <p>泡温泉</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe602;</i>
                    <p>动植物园</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe71f;</i>
                    <p>一日游</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe65b;</i>
                    <p>必买清单</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe61e;</i>
                    <p>自然风光</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe639;</i>
                    <p>全部</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe71f;</i>
                    <p>一日游</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe607;</i>
                    <p>必买清单</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe61e;</i>
                    <p>自然风光</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe639;</i>
                    <p>全部</p>
                </div>
            </swiper-slide>
            <swiper-slide>
                <div class="icon">
                    <i class="iconfont">&#xe607;</i>
                    <p>必买清单</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe61e;</i>
                    <p>自然风光</p>
                </div>
                <div class="icon">
                    <i class="iconfont">&#xe639;</i>
                    <p>全部</p>
                </div>
            </swiper-slide>
         </swiper>
    </div>
</template>
<script>
export default {
    name:'IndexIcon',
     data() {
         return {
             swiperOption: {
                 loop: true,
             },
         };
    },
    computed: {
        pages () {
            const pages = [];
            
        }
    }
};
   
</script>
<style scoped>
    .iconfont {
    font-family: "iconfont" !important;
    font-size: 35px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
    .icons >>> .swiper-container{
        height: 0;
        padding-bottom: 50%;
    }
    .icons{
        overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        text-align: center;
        padding-top: 1rem;
    }
    .icon{
        float: left;
        width: 25%;
        height: 0;
        padding-bottom: 25%;
    }
</style>
